<template>
  <div class="data-mapping-detail-dialog display-flex w-full h-full" style="overflow: hidden">
    <div class="h-full flex-1 item-list-box display-flex-column" style="overflow: auto">
      <div class="item-list display-flex" style="justify-content: flex-start">
        <div class="item-list-name m-r-md">模板名称:</div>
        <div class="item-list-content">
          <a-input v-model="dataInfo.name" style="width: 500px"/>
        </div>
      </div>
      <div class="item-list display-flex" style="justify-content: flex-start;align-items: flex-start">
        <div class="item-list-name m-r-md">JSON模板:</div>
        <div class="item-list-content">
          <a-textarea
            v-model="dataInfo.content"
            style="width: 500px"
            :auto-size="{ minRows: 6, maxRows: 10 }"
          />
        </div>
      </div>
      <div class="item-list display-flex" style="justify-content: flex-start">
        <div class="item-list-name m-r-md">JS脚本:</div>
        <div class="item-list-content">
          <a-select
            show-search
            v-model="dataInfo.scriptId"
            class="selector-item"
            :filter-option="filterDicOption"
            style="width: 500px">
            <a-select-option v-for="item in scriptList" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import dataMappingService from '@/api/dataMappingService'

export default {
  name: 'DataMappingDetailDialog',
  props: {
    id: {
      type: Number,
      default: () => {
        return 0
      }
    }
  },
  data () {
    return {
      dataInfo: {
        scriptId: undefined,
        name: '',
        nick: '',
        content: ''
      },
      scriptList: []
    }
  },
  mounted () {
    this.getDataMappingById()
    this.getAllScriptList()
  },
  methods: {
    getDataInfo () {
      return this._.cloneDeep(this.dataInfo)
    },
    filterDicOption (input, option) {
      const find = this._.find(this.scriptList, item => item.id === option.key)
      return find.name.indexOf(input) >= 0
    },
    async getAllScriptList () {
      const data = await dataMappingService.getAllScriptList({}, {})
      this.scriptList = data.rows
    },
    async getDataMappingById () {
      if (!this.id) {
        return
      }
      const data = await dataMappingService.getDataMappingTemplateById({
        id: this.id
      })
      Object.assign(this.dataInfo, data)
    }
  }
}
</script>

<style scoped lang="less">
.data-mapping-detail-dialog {
  padding: 10px;
  .item-list {
    margin-bottom: 10px;
  }
}
</style>
